import React from "react";
import {Select} from 'antd';
import Sql from "@/pages/sql/sql";
import {getMenus} from "@/common/menu";

const Option = Select.Option

class SQLQuery extends React.Component {

  state = {
    id: null,
    list: [],
  }

  onChange = (e) => {

  }

  tableToJSON = () => {
    const menus = getMenus();
    const dom = document.querySelector(".querycallback pre");
    dom.innerHTML = JSON.stringify(menus, null, " ");
  };

  render() {
    const {id, list} = this.state;
    return (
      <div style={{background: '#fff', padding: "0 20px", height: "100%"}}>
        <div style={{padding: "20px 0", minWidth: 400}}>
          <span>逻辑集群：</span>
          <Select value={id} onChange={this.onChange} style={{minWidth: 200}}>
            {list?.map((item) => <Option value={item.id} key={item.id}>{item.name}</Option>)}
          </Select>
        </div>

        <div style={{border: "solid 1px red", display: "flex", height:"calc(100% - 72px)"}}>
          <div style={{flex: 1}}>
            <Sql/>
          </div>
          <div style={{width: "20px"}}>
           &gt;
          </div>
          <div style={{flex: 1, overflowY: "auto"}}>
            <span className="switch-btn" onClick={this.tableToJSON}>JSON</span>
            <div className="bottom-console">
              <div>执行结果：</div>
              <div style={{display: "block"}} className="box-right">
                <span style={{display: "block"}} className="switch-btn">TABLE</span>
                <div className="querycallback">
                  <pre/>
                </div>
              </div>
            </div>
          </div>


        </div>
      </div>
    )
  }
}

export default SQLQuery
